<div [@routerTransition]>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6">
                    <h1>{{ 'Roles' | localize }}</h1>
                </div>
                <div class="col-6 text-right">
                    <a href="javascript:;" class="btn bg-blue" (click)="createRole()">
                        <i class="fa fa-plus-square"></i>
                        {{ 'Create' | localize }}
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="content px-2 pb-5">
        <div class="container-fluid">
            <div class="card mb-0 table-wrapper">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">&emsp;</div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn bg-blue" (click)="list()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <input
                                    type="text"
                                    class="form-control"
                                    name="keyword"
                                    [placeholder]="'SearchWithThreeDot' | localize"
                                    [(ngModel)]="keyword"
                                    (keyup.enter)="list()" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <!--<Primeng-TurboTable-Start>-->
                        <div class="primeng-datatable-container table-striped table-bordered">
                            <p-table
                                #dataTable
                                sortMode="multiple"
                                (onLazyLoad)="list($event)"
                                [value]="primengTableHelper.records"
                                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                [paginator]="false"
                                [lazy]="true"
                                [tableStyle]="{ 'min-width': '50rem' }">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="min-width: 150px" pSortableColumn="name">
                                            {{ 'RoleName' | localize }}
                                            <p-sortIcon field="name"></p-sortIcon>
                                        </th>
                                        <th style="min-width: 150px" pSortableColumn="displayName">
                                            {{ 'DisplayName' | localize }}
                                            <p-sortIcon field="displayName"></p-sortIcon>
                                        </th>
                                        <th style="min-width: 130px">
                                            {{ 'Actions' | localize }}
                                        </th>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td>
                                            <span>
                                                {{ record.name }}
                                            </span>
                                        </td>
                                        <td>
                                            <span>
                                                {{ record.displayName }}
                                            </span>
                                        </td>
                                        <td>
                                            <button
                                                type="button"
                                                class="btn btn-sm bg-secondary"
                                                (click)="editRole(record)">
                                                <i class="fas fa-pencil-alt"></i>
                                                {{ 'Edit' | localize }}
                                            </button>
                                            <button
                                                type="button"
                                                class="btn btn-sm bg-danger mx-2"
                                                (click)="delete(record)">
                                                <i class="fas fa-trash"></i>
                                                {{ 'Delete' | localize }}
                                            </button>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                {{ 'NoData' | localize }}
                            </div>
                        </div>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
                <div class="card-footer table-card-footer bg-white border-top">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-sm-4 col-12 text-sm-left text-center">
                            <button class="btn btn-secondary" (click)="refresh()">
                                <i class="fas fa-redo-alt"></i>
                            </button>
                        </div>
                        <div class="col-sm-8 col-12">
                            <div class="float-sm-right m-auto">
                                <div class="primeng-paging-container">
                                    <p-paginator
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                        #paginator
                                        (onPageChange)="list($event)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                        [showCurrentPageReport]="true"
                                        [currentPageReportTemplate]="
                                            'TotalRecordsCount' | localize: primengTableHelper.totalRecordsCount
                                        "></p-paginator>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
